<script setup>
import { ref } from 'vue'
// 定义测试div的状态
let status = ref(false)
let username = ref('')
let age = ref('')
let phone = ref('')
let gender = ref('')
let dbArr = ref([])
let keyWord = ref('')
let winName = ref('')
let manStatus = ref(false)
let womanStatus = ref(false)
let tmpId = ref(null)
//  用户点击返回之后回到首页
function btn_back() {
    status.value = false
    /**
     * 因为是共用一个页面 操作之后都要清除数据 方便下次操作
     */
    username.value = ''
    age.value = ''
    manStatus.value = false
    womanStatus.value = false
    phone.value = ''
}
// 用户点击之后显示测试的div
function btn_add() {
    winName.value = '添加'
    status.value = true
}
// 用户点击之后删除对应的DOM元素
function btn_del(id) {
    let uId = parseInt(id)
    if (confirm('是否删除该数据')) {
        fetch(`http://localhost:5000/user/${uId}`, {
            method: 'DELETE'
        }).then(res => {
            if (res.ok) {
                alert('删除成功')
                window.location.reload();
            }
        })
    } else {
        return null
    }
}
// 用户点击保存之后添加新的用户
/**
 * 通过有没有id来判断是新增还是修改
 * 定义一个变量将用户点击修改的id存储
 */
function btn_save() {
    let uId = tmpId.value
    // 修改后的数据进行储存
    if (uId) {
        let name = username.value
        let userAge = age.value
        let userPhone = phone.value
        let sex = gender.value
        if (sex === '1') {
            sex = '男'
        } if (sex === '0') {
            sex = '女'
        }
        let user = {
            name,
            age: userAge,
            sex: sex,
            phone: userPhone
        }
        // 修改api
        fetch(`http://localhost:5000/user/${uId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            }, body: JSON.stringify(user)
        }).then(res => {
            if (res.ok) {
                alert('修改成功')
                window.location.reload()
            }
        })
    } else {
        let name = username.value
        let userAge = age.value
        let userPhone = phone.value
        let sex = gender.value
        // 进行数据处理 方便添加后的数据类型一样
        if (sex === '0') {
            sex = '女'
        } else if (sex === '1') {
            sex = '男'
        }
        // 判断非空 并提示用户
        if (name === '') {
            alert('用户名不能为空')
            return
        } if (userAge === '') {
            alert('年龄不能为空')
            return
        } if (sex === '') {
            alert('请选择性别')
            return
        } if (userPhone === '') {
            alert('联系方式不能为空')
            return
        }
        if (name && userAge && sex && userPhone) {
            let user = {
                name: name,
                age: userAge,
                sex: sex,
                phone: userPhone
            }
            console.log(user);
            // 添加api
            fetch('http://localhost:5000/user', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(user)
            }).then(res => {
                if (res.ok) {
                    alert('添加成功')
                    // status = false
                    // 成功添加之后重新加载页面
                    window.location.reload()
                }
            })
        } else {
            return null
        }
    }
}
// 渲染页面 获取数据库数据
function getData() {
    fetch('http://localhost:5000/users').then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(item => {
        dbArr.value = item
    })
}
// 获取数据
getData()
// 用户输入关键字后 根据关键字进行查找
function btn_search() {
    let key = keyWord.value
    fetch(`http://localhost:5000/users/${key}`).then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(item => {
        dbArr.value = item
    })
}
// 用户点击编辑按钮后弹出编辑窗口
function btn_edit(id) {
    let uId = parseInt(id)
    tmpId.value = uId
    winName.value = '编辑'
    status.value = true
    fetch(`http://localhost:5000/user/${uId}`).then(res => {
        if (res.ok) {
            return res.json()
        }
    }).then(data => {
        username.value = data.name
        age.value = data.age
        if (data.sex === '男') {
            manStatus.value = true
        }
        if (data.sex === '女') {
            womanStatus.value = true
        }
        phone.value = data.phone
    })

}


</script>


<template>
    <div id="outDiv">
        <div id="testDiv" v-show="status">
            <form>
                <h2>{{ winName }}用户</h2>
                <table>
                    <tbody>
                        <tr>
                            <td>用户名: <input type="text" v-model="username"></td>
                        </tr>
                        <tr>
                            <td>年龄: <input type="text" v-model="age"></td>
                        </tr>
                        <tr>
                            <td>
                                男<input type="radio" v-model="gender" name="sex" value="1" :checked="manStatus">
                                女<input type="radio" v-model="gender" name="sex" value="0" :checked="womanStatus">
                            </td>
                        </tr>
                        <tr>
                            <td>联系方式: <input type="text" v-model="phone"></td>
                        </tr>
                        <tr>
                            <td>
                                <input type="button" value="保存" @click="btn_save()">
                                <input type="button" value="返回" @click="btn_back()" class="totalBtn">
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
        <div style="margin-top: 20px;">
            <input type="text" placeholder="请输入关键字" v-model="keyWord">
            <input type="button" value="查询" @click="btn_search()" class="totalBtn">
            <input type="button" value="添加" @click="btn_add()" class="totalBtn">
        </div>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>用户名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>联系方式</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in dbArr" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.phone }}</td>
                    <td>
                        <input type="button" value="编辑" @click="btn_edit(item.id)">
                        <input type="button" value="删除" @click="btn_del(item.id)" class="totalBtn">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style>
body {
    height: 100vh;
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#testDiv {
    position: absolute;
    width: 1250px;
    height: 650px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid salmon;
    border-radius: 10px;
    /* 半透明白色背景 */
    background: rgba(255, 255, 255, 0.5);
    /* 背景模糊效果 */
    backdrop-filter: blur(20px);
    border-radius: 10px;
    /* 加阴影效果 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#testDiv table {
    width: 100%;
    line-height: 30px;
}

#testDiv form {
    text-align: center;
    width: 80%;
}

#testDiv h2 {
    font-family: cursive;
    font-size: 50px;
    margin-top: -30px;
}

#outDiv {
    width: 1250px;
    height: 650px;
    border: 2px solid pink;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 10px;

}


table {
    margin-top: 20px;
    font-family: cursive;
    text-align: center;
    width: 1000px;
    line-height: 30px;
    overflow-y: scroll;
    border-collapse: collapse;
}

th,
tr,
td {
    border: 1px solid lightblue;
}

#outDiv tbody tr:nth-child(odd) {
    background-color: rgb(180, 180, 180);
}

input {
    outline: none;
}

.totalBtn {
    margin-left: 15px;
}
</style>